<template>
  <div class="resume_header">
    <span>已申请的岗位</span>
    <!-- <el-button type="primary" class="addJob_btn" @click="handleAdd()">添加岗位</el-button> -->
  </div>
  <div class="resume_center">

    <el-table :data="filterTableData.slice((page - 1) * limit, page * limit)" style="width: 100%" height="520px"
      size="large" @filter-change="tablesort">
      <el-table-column label="岗位" prop="jobName" sortable width="240" column-key="jobIndustry"
        :filters="filterJobNameData">
        <template #default="scope">
          <router-link :to="{ path: '/postionInfoPage', query: { jobId: scope.row.jobId } }">
            {{ scope.row.jobName }}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="公司" prop="eName" sortable width="220" column-key="eName" :filters="filterENameData">
        <template #default="scope">
          <router-link :to="{ path: '/eInfoPage', query: { eId: scope.row.eId } }">
            {{ scope.row.eName }}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="申请状态" prop="applyState" sortable width="150" column-key="applyState"
        :filters="filterApplyJobStateData">
        <template #default="scope">
          <el-tag :type="ElTagState(scope.row.applyState)">
            {{ scope.row.applyState }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="default" placeholder="搜索" />
        </template>
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleShowResult(scope.$index, scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="pagination">
      <Pagination :page="page" :limit="limit" :handleSizeChange="handleSizeChange"
        :handleCurrentChange="handleCurrentChange" :filterTableData="filterTableData" :pagesizes="pagesizes" />
    </div>

  </div>
  <el-dialog v-model="centerDialogVisible" title="详情" width="30%" :show-close="false" >
    
     {{ stateContent}}
    
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang='ts' setup>
import { getUserApplyJobs,getApplyJobResult } from "@/api/userApi"
import { data, elmessage, ElTagState } from "@/hook/hook"
import { computed, ref, onMounted, reactive, onBeforeMount } from 'vue'
import { useStore } from "vuex"
import { useRouter } from "vue-router"
import { text } from 'stream/consumers';
const store = useStore()
const router = useRouter()

// 表格数据定义
interface ApplyJob {
  jobId: string
  jobName: string
  jobIndustry: string
  eId: string
  eName: string
  applyState: string
}
const tableData: ApplyJob[] = reactive([])
const search = ref('')
// 搜索过滤
const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !search.value ||
      // 通过岗位名称筛选
      // data.name.toLowerCase().includes(search.value.toLowerCase())
      data.jobName.toLowerCase().indexOf(search.value.toLowerCase()) !== -1
  )
)

// 定义筛选类型
interface filterType {
  text: string,
  value: string
}

var jobIndustryArr: any = reactive([])
var eNameArr: any = reactive([])
var applyStateArr: any = reactive([])
const tableData_1: ApplyJob[] = reactive([])
const setJobIndustryArr = (arr: any) => {
  jobIndustryArr = arr
}
const getJobIndustry = () => {
  return jobIndustryArr
}

const setENameArr = (arr: any) => {
  eNameArr = arr
}
const getENameArr = () => {
  return eNameArr
}
const setApplyStateArr = (arr: any) => {
  applyStateArr = arr
}
const getApplyStateArr = () => {
  return applyStateArr
}

const tablesort = (filterArr: ApplyJob) => {
  // 清除原表格数据
  tableData.splice(0, tableData.length)
  if ((typeof (filterArr.jobIndustry)) == "object") {
    setJobIndustryArr(filterArr.jobIndustry)
  }
  if ((typeof (filterArr.eName)) == "object") {
    setENameArr(filterArr.eName)
  }
  if ((typeof (filterArr.applyState)) == "object") {
    setApplyStateArr(filterArr.applyState)
  }
  const jobIndustryLength = getJobIndustry().length
  const eNameLength = getENameArr().length
  const applyStateLength = getApplyStateArr().length
  // 按筛选条件重新加入数据
  tableData_1.forEach((valu: any, index: any, arr_1: any) => {
    // 所有筛选重置，即最初排序
    if (jobIndustryLength == 0 && eNameLength == 0 && applyStateLength == 0) {
      if (tableData.findIndex((item: { jobId: string; }) => item.jobId == valu["jobId"]) == -1) {
        tableData.push(valu)
      }

    }
    // 只筛选岗位名称
    else if (jobIndustryLength > 0 && eNameLength == 0 && applyStateLength == 0) {
      if (getJobIndustry().includes(valu["jobIndustry"])) {
        if (tableData.findIndex((item: { jobId: string; }) => item.jobId == valu["jobId"]) == -1) {
          tableData.push(valu)
        }
      }
    }
    // 只筛选公司名称
    else if (jobIndustryLength == 0 && eNameLength > 0 && applyStateLength == 0) {
      if (getENameArr().includes(valu["eName"])) {
        if (tableData.findIndex((item: { jobId: string; }) => item.jobId == valu["jobId"]) == -1) {
          tableData.push(valu)
        }
      }
    }
    // 只筛选状态
    else if (jobIndustryLength == 0 && eNameLength == 0 && applyStateLength > 0) {
      if (getApplyStateArr().includes(valu["applyState"])) {
        if (tableData.findIndex((item: { jobId: string; }) => item.jobId == valu["jobId"]) == -1) {
          tableData.push(valu)
        }
      }
    }
    // 筛选岗位名称、公司名称
    else if (jobIndustryLength > 0 && eNameLength > 0 && applyStateLength == 0) {
      if (getJobIndustry().includes(valu["jobIndustry"]) && getENameArr().includes(valu["eName"])) {
        if (tableData.findIndex((item: { jobId: string; }) => item.jobId == valu["jobId"]) == -1) {
          tableData.push(valu)
        }

      }
    }
    // 筛选岗位名称、状态
    else if (jobIndustryLength > 0 && eNameLength == 0 && applyStateLength > 0) {
      if (getJobIndustry().includes(valu["jobIndustry"]) && getApplyStateArr().includes(valu["applyState"])) {
        if (tableData.findIndex((item: { jobId: string; }) => item.jobId == valu["jobId"]) == -1) {
          tableData.push(valu)
        }
      }
    }
    // 筛选公司名称、状态
    else if (jobIndustryLength == 0 && eNameLength > 0 && applyStateLength > 0) {
      if (getENameArr().includes(valu["eName"]) && getApplyStateArr().includes(valu["applyState"])) {
        if (tableData.findIndex((item: { jobId: string; }) => item.jobId == valu["jobId"]) == -1) {
          tableData.push(valu)
        }
      }
    }
    // 筛选岗位名称、公司名称、状态
    else if (jobIndustryLength > 0 && eNameLength > 0 && applyStateLength > 0) {
      if (getJobIndustry().includes(valu["jobIndustry"]) && getENameArr().includes(valu["eName"]) && getApplyStateArr().includes(valu["applyState"])) {
        if (tableData.findIndex((item: { jobId: string; }) => item.jobId == valu["jobId"]) == -1) {
          tableData.push(valu)
        }
      }
    }
  })
}
const filterJobNameData: filterType[] = reactive([])
const filterENameData: filterType[] = reactive([])
const filterApplyJobStateData: filterType[] = reactive([])
const stateContent=ref()
const centerDialogVisible = ref(false)
const handleShowResult=(index: number, row: ApplyJob)=>{
  const newData={
    ...data(),
    jobId:row.jobId
  }
  getApplyJobResult(newData).then(async (res: any) => {
    // console.log(res.data["message"]);
    if (res.data["code"] = "200") {
      
      stateContent.value=res.data["stateContent"][0]
    } else if (res.data["code"] == "300") {
      elmessage(res.data["message"], res.data["type"])
      setTimeout(() => {
        router.replace("/login")
      }, 500);
      localStorage.clear()
    } else {
      console.log(res.data["message"]);

    }
  })
  centerDialogVisible.value = true
}

// 分页器
const page = ref(1)
const pagesizes = ref([1, 2, 3, 4, 10, 20, 30, 40])
const limit = ref(10)

const handleSizeChange = (val: number) => {
  // pushTableData()
  limit.value = val
  page.value = 1

}
const handleCurrentChange = (val: number) => {
  page.value = val
  // pushTableData()
}

// 初始化数据
const init = async () => {
  await getUserApplyJobs(data()).then(async (res: any) => {
    // console.log(res.data["message"]);
    if (res.data["code"] = "200") {

      res.data.datas.forEach((value: any, index: any, self: any) => {
        tableData.push(value)
        tableData_1.push(value)
      })

      res.data["industrys"].forEach((value: any, index: any, self: any) => {
        filterJobNameData.push(value)
      });
      res.data["es"].forEach((value: any, index: any, self: any) => {
        filterENameData.push(value)
      });
      res.data["applyjobstate"].forEach((value: any, index: any, self: any) => {
        filterApplyJobStateData.push(value)
      });


    } else if (res.data["code"] == "300") {
      elmessage(res.data["message"], res.data["type"])
      setTimeout(() => {
        router.replace("/login")
      }, 500);
      localStorage.clear()
    } else {
      console.log(res.data["message"]);

    }
  })
}

onBeforeMount(async () => {

  await init()
  // pushTableData()

})


</script>
<style scoped>
.pagination {
  float: right;
  margin-right: 50px;
  /* right: 150px; */
}


.resume_center {
  font-family: '微软雅黑';
  height: 800px;
  background-color: #FFF;
}

.resume_header {
  background-color: rgb(215, 215, 215);
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 20px;

}

a {
  text-decoration: none;
  color: #000;
}
</style>